<template>
  <div id="app">
    <div class="content">
      <!--    头部1-->
      <header-menu></header-menu>
      <!--    头部2-->
      <nav-bar></nav-bar>
      <!--    占位符号，显示各种页面-->
      <router-view></router-view>
      <!--    footer-->
      <footer-message></footer-message>
    </div>
    
    <!--    音乐播放-->
    <div class="footer">
      <play-music></play-music>
    </div>
  
  </div>
</template>
<script>
import headerMenu from "@/components/headers/headerMenu";
import NavBar from "@/components/headers/NavBar";
import FooterMessage from "@/components/footer/FooterMessage";
import playMusic from "@/components/playmusic/playMusic";

export default {
  components: {
    headerMenu,
    NavBar,
    FooterMessage,
    playMusic,
  },
  data() {
    return {}
  },
  created() {
  
  },
  methods: {},
}
</script>
<style lang="less">
#app {
  height: 100%;
  min-width: 1400px;
  background-color: #000000;
  //overflow-x:hidden
  .content {
    height: calc(100% - 70px); // 使用height，而不是min-height
    overflow: scroll
  }
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
  }
  
}

</style>
